<template>
    <div :style="mainStyle">
        <navigation-bar :title="title" :onLeftButtonClick="function(){
        toBack()}" :rightIcon="' '"></navigation-bar>
        <div class="text_start"   :style="webStyle" v-if="step === 1 ">
            <div class="container" >
                <image :src="image" class="text-image"></image>
                <text class="text-info">
                    {{desc}}
                </text>
            </div>
            <wxc-button text="开始测评" type="red"
                        :btn-style="{width:'312px', margin:'0px',height:'70px',borderRadius:'36px', backgroundColor: '#00BB9A'}"
                        @wxcButtonClicked="startTest"></wxc-button>

        </div>
        <div v-if="step === 2" class="text_question" :style="webStyle" >
            <div class="question-box">
                <div class="subject-title">
                    <text>({{onSubject +1}}/{{subjectsNum}}) </text>
                    <text>{{question.name}}</text>
                </div>
                <div class="subject-question">
                    <wxc-radio :list="list" @wxcRadioListChecked="answering" :config="config" ></wxc-radio>
                </div>
         </div>
        </div>
        <div class="text_start" :style="webStyle" v-if="step === 3 ">
            <div class="container">
                <image :src="image" class="text-image"></image>
                <text class="text-thank">您已完成此次测评</text>
            </div>

            <wxc-button text="查看测评报告" type="red"
                        :textStyle="{color:'#00BB9A'}"
                        :btn-style="{width:'312px',margin:'0px',height:'70px',borderRadius:'36px', backgroundColor: '#ffffff',
                        borderColor:'#00BB9A',borderStyle:'solid', borderWidth: '2px'}"
                        @wxcButtonClicked="getResult"></wxc-button>

        </div>
    </div>
</template>
<style scoped>
    .text_start {
        align-items: center;
        background-color: #ffffff;
        padding-top:100px
    }
    .text_question{
        align-items: center;
        background-color: #ffffff;
    }
    .text-thank{
        margin-top:30px;
        color:#434A54;
        font-size:36px
    }
    .text-image {
        width: 240px;
        height: 200px
    }

    .container {
        align-items: center;
        justify-content: center;
        height: 700px;
    }

    .text-info {
        color: #434A54;
        font-size: 24px;
        height: 500px;
        width:650px;
    }
    .subject-title{
        width:750px;
        height:194px;
        background-color:#EEEEEE;
        padding:30px;
    }
    .subject-question{
        width:750px;
        padding: 10px;
    }
</style>

<script>
  import NavigationBar from './widget/NavigationBar.vue'
  import { getEntryPageStyle } from '../config/Config'
  import { Utils, WxcButton, WxcRadio } from 'weex-ui'
  import test from '../core/net/test'
  const animation = weex.requireModule('animation')
  export default {
    components: {
      NavigationBar,
      WxcButton,
      WxcRadio,
    },
    data: () => {
      return {
        step: 3,
        testId: '',
        title: '',
        desc: '',
        image: '',
        mainStyle: {},
        subjects: [
          {
            name:'',
            subjectItem:[]
          }
        ],
        answers: [
          {
            answer: '',
            core: 0,
            dimension_id: 0,
          },
        ],
        subjectsNum: 0,
        answerNum: 1,
        onSubject: 0,
        list:[],
        config:{
          checkedIcon:'http://cdn.www.bright-tech.cn/PeiYouCe/31ab1304f4eaecef3e7ca68099691/hH0Uxdjsa0LxggssT265cFJEwGhL8DOM4mKjjDwv.png',
          checkedColor: '#000000'
        },
        webStyle: {height: '1334px', width: '750px'},
      }
    },
    methods: {
      init () {
        this.getQuestions()
      },
      getResult(){
        this.jumpWithParams('TestResult', {
          test:this.testId
        })
      },
      getQuestions () {
        test.getTestDesc(this.testId).then((res) => {
          this.subjects = res.data.subjects
          this.subjectsNum = res.data.subjectsNum
          this.getAnswer()
        })
      },
      getAnswer () {
        test.getAnswer(this.testId).then((res) => {
          if (res.data.status === 1) {
            this.step = 3
          }
          if (res.data.progress) {
            this.onSubject = res.data.progress - 1
          }
          if (res.data.answers.length > 0) {
            this.answers = res.data.answers
            this.answerNum = res.data.answers.length
          }
          this.getList()
          // this.question = this.subjects[this.onSubject]
        })
      },
      getList(){
        this.list = []
        let list = []
        if (this.question) {
          let data = this.question.subjectItem
          if(data.length >0){
            data.forEach((item, index) => {
              let ex = {
                title: item.content,
                value: index
              }
              list.push(ex)
            })
          }
          this.list = list
        }
      },
      startTest () {
        this.step = 2
      },
      answering (e) {
        let num = e.index
        let item = this.question.subjectItem[num]
        this.answers[this.onSubject].dimension_id = item.dimension_id
        this.answers[this.onSubject].core = item.core
        this.answers[this.onSubject].answer = num
        let on = this.onSubject + 1
        test.saveAnswers({
          answers: this.answers,
          evaluation_id: this.testId,
          progress: on,
        }).then((res) => {
          console.log(res)
          if (res && res.result){
            if (on < this.subjectsNum) {
              if (!this.answers[on]) {
                this.answers.push(
                  {
                    answer: '',
                    core: 0,
                    dimension_id: 0,
                  })
              }
              this.onSubject += 1
              this.getList()
              this.answerNum = this.answers.length
            } else {
              this.step = 3
            }
          }

          },
        )
      },
    },
    created () {
      this.testId = this.getQuery().test
      this.title = this.getQuery().title
      this.desc = this.getQuery().desc
      if(this.getQuery().is === true){
        this.step = 3
      }else{
        this.step = 1
      }
      this.image = this.getQuery().image
      this.mainStyle = getEntryPageStyle(Utils)
      this.init()
    },
    computed: {
      question () {
        return this.subjects[this.onSubject]
      },
      answer () {
        return this.answers[this.onSubject]
      },
    },
  }
</script>
